<template>
	<div class="productList">
		<div class="crumbs">
			<el-breadcrumb separator="/">
				<el-breadcrumb-item><i class="el-icon-menu"></i> 产污情况</el-breadcrumb-item>
				<el-breadcrumb-item>固体废物管理</el-breadcrumb-item>
			</el-breadcrumb>
		</div>
		<el-form :inline="true" :model="formInline" class="demo-form-inline">
			<el-form-item label="危废类别">
				<el-input v-model="formInline.nickname" placeholder="请输入危废类别"></el-input>
			</el-form-item>
			<el-form-item label="危废代码">
				<el-input v-model="formInline.nickname" placeholder="请输入危废代码"></el-input>
			</el-form-item>
			<el-form-item label="危废名称">
				<el-input v-model="formInline.nickname" placeholder="请输入危废名称"></el-input>
			</el-form-item>
			<el-form-item label="行业">
				<el-input v-model="formInline.nickname" placeholder="请输入行业"></el-input>
			</el-form-item>
			<el-form-item>
				<el-button type="primary" @click="onSubmit">查询</el-button>
			</el-form-item>

		</el-form>
		<div class="btn-groups">
			<el-button size="small" @click="add()">添加</el-button>
			<el-button size="small" type="primary" @click="">导出</el-button>
		</div>
		<el-table :data="tableData" border stripe>
			<el-table-column prop="type" label="危废类别">
			</el-table-column>
			<el-table-column prop="code" label="危废代码">
			</el-table-column>
			<el-table-column prop="name" label="危废名称">
			</el-table-column>
			<el-table-column prop="common_name" label="俗称">
			</el-table-column>
			<el-table-column prop="part" label="有害成分">
			</el-table-column>
			<el-table-column prop="unit" label="计量单位">
			</el-table-column>
			<el-table-column prop="status" label="危废形态">
			</el-table-column>
			<el-table-column prop="special" label="危废特性">
			</el-table-column>
			<el-table-column label="操作" width="180">
				<template scope="scope">
					<el-button size="small" @click="setting(scope.row)">修改</el-button>
					<el-button size="small" type="danger" @click="handleDelete(scope.$index,scope.row.relation_id)">删除</el-button>
				</template>
			</el-table-column>
		</el-table>
		<div class="pagination">
			<el-pagination @current-change="handleCurrentChange" layout="prev, pager, next" :total="total_num">
			</el-pagination>
		</div>

		<el-dialog :title="dialogTitle" :visible.sync="dialogFormVisible">
		  	<span>确定删除？</span>
			<span slot="footer" class="dialog-footer">
			    <el-button @click="dialogFormVisible = false">取 消</el-button>
			    <el-button type="primary" @click="dialogFormVisible = false">确 定</el-button>
			</span>
		</el-dialog>

	</div>
</template>

<script>
	export default {
		data() {
			return {
				token: localStorage.getItem('token') ? localStorage.getItem('token') : "",
				uid: localStorage.getItem('uid') ? localStorage.getItem('uid') : "",
				dialogVisible: false,
				tableData: [
					{
						"type":"HW12涂料废物",
						"code":"900-249-08",
						"name":"含油废物",
						"common_name":"含油废物",
						"part":"废矿物油",
						"unit":"吨",
						"status":"固体",
						"special":"非生产性产废料",
					},
					{
						"type":"HW12涂料废物",
						"code":"900-249-08",
						"name":"含油废物",
						"common_name":"含油废物",
						"part":"废矿物油",
						"unit":"吨",
						"status":"固体",
						"special":"非生产性产废料",
					},
				],
				cur_page: 1,
				total_num: 100,
				formInline: {
					nikename: '',
					level: ''
				},
				form:{
					reward:0,
					relationId:0
				},
				typeOptions: [{value:2,label:2},{value:3,label:3}],
				dialogFormVisible: false,
				dialogImageUrl:"",
				dialogTitle:'提示'
			}
		},
		created() {
			this.getData();
		},
		mounted: function() {
			this.$nextTick(function() {
				let self = this;
			});
		},
		methods: {
			add() {
				this.$router.push('/add');
			},
			//查找
			onSubmit() {
				let self = this;
				self.getData();
			},
			//改变页数
			handleCurrentChange(val) {
				let self = this;
				self.cur_page = val;
			},
			//获取表格数据
			getData() {

			},
			//设置弹窗
			setting(row){
				const self = this;
				self.$router.push('/add');
			},
			//修改回报
			handleSetting(){
				const self = this;
				self.dialogFormVisible = false;
				self.$axios({
					headers: {
						'Content-Type': 'application/json;charset=utf-8',
						'Accept': 'application/json',
						'Authorization': 'Bearer' + self.token
					},
					method: 'put',
					url: self.request_url + "user/update",
					params: {
						'id': self.form.relationId,
						'reward': self.form.reward
					}
				}).then((res) => {
					if(res.data.code == 0) {
						self.$message(res.data.msg);
						self.form.row.reward = parseFloat(self.form.reward).toFixed(2);
					} else {
						self.$message.error(res.data.msg);
					}
				}).catch(function(error) {
					self.$message.error("网络错误2！");
				});
			},
			//删除
			handleDelete(index,id) {
				const self = this;
				self.dialogFormVisible = true;
			}
		}
	}
</script>
<style lang="less">
	.edit-dialog {
		.el-date-editor--daterange.el-input {
			width: 100%!important;
		}
	}
	
	.el-dialog {
		width: 350px;
	}
	
	.tableImg {
		height: 50px;
		width: 50px;
		display: block;
		margin: 0 auto;
	}
	.btn-groups {
		margin-bottom:5px;
	}
</style>